import React, { Component } from 'react';
import { Editor } from 'react-draft-wysiwyg';
import { EditorState, convertToRaw, ContentState } from 'draft-js';
import draftToHtml from 'draftjs-to-html';
import htmlToDraft from 'html-to-draftjs';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';

//  这里的 UploadBase64 是我的图片上传接口
import { histOpen } from '../api/api.js';
// 这里的 IMG_URL 图片的 Host， 因为上面的接口上传成功返回的是一个相对路径 页面展示时需要自行拼接 Host。 这两处， 大家可根据实际情况自行修改
// import { IMG_URL } from '../utils';
let IMG_URL = ""
//transformDraftStateToHtml 该方法是对传入的 字符串 解析成 html
const transformDraftStateToHtml = (editorState) => {
    if (!editorState.getCurrentContent) {
        return '';
    }
    return draftToHtml(convertToRaw(editorState.getCurrentContent()));
};
//　transformHtmlToDraftState 用于编辑修改后 将当前编辑框中的内容 转换成 字符串 ， 传入父组件 以供与后台接口使用
const transformHtmlToDraftState = (html = '') => {
    const blocksFromHtml = htmlToDraft(html);
    const { contentBlocks, entityMap } = blocksFromHtml;
    const contentState = ContentState.createFromBlockArray(contentBlocks, entityMap);
    return EditorState.createWithContent(contentState);
}

function getBase64(img, callback) {
    return new Promise((res, rej) => {
        const reader = new FileReader();
        reader.addEventListener('load', () => res(reader.result));
        reader.readAsDataURL(img);
    })
}


class EditorVan extends Component {

    state = {
        editorState: ''
    }

    onEditorStateChange = (editorState) => {
        this.setState({
            editorState
        })
        this.props.transformHTML( transformDraftStateToHtml(editorState) )
    };

    componentDidMount() {
        this.setState({
            editorState: transformHtmlToDraftState(this.props.editorState)
        })
    };
    //本地图片上传
    uploadImageCallBack = (file) => {
        debugger;
        return new Promise((resolve, reject) => {
            (async() => {
                const base64 = await getBase64(file);
                const data = {
                    base64: base64.split(',')[1],
                    fileName: file.name,
                    fileCode: 'material',
                }
                const res = await histOpen("/imgurl",data);
                if(res && res.data) {
                    resolve({
                        data: {
                            link: `${IMG_URL}${res.data}`,
                        },
                    });
                } else {
                    reject();
                }
            })();
        })
    }

    render() {
        return (
            <Editor
                editorState={this.state.editorState}
                onEditorStateChange={this.onEditorStateChange}
                toolbar={{
                    image: {
                        uploadCallback: this.uploadImageCallBack,
                        alt: { present: true, previewImage: true },
                        previewImage: true,
                    },
                }}
            />
        )
    }
};

export default EditorVan;

